<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no"/>
  <meta name="format-detection" content="email=no"/>
  <title>消息</title>
  <link rel="stylesheet" href="../../css/api.css">
  <link rel="stylesheet" href="../../css/main.css">
  <style></style>
</head>
<body>
<div class="app" v-cloak>
  <div v-if="messageList.length > 0" class="info-list">
    <div class="info-item" v-for="(item,index) in messageList" :key="item.id" @click="goPage(item)">
      <div :class="['flex-x-sb', {around: !item.read}]">
        <div class="title">{{item.title}}</div>
        <div class="time">{{item.createTime | handleTimeYMDHmSZH}}</div>
      </div>
      <div class="content">{{item.content}}</div>
    </div>
  </div>
  <div v-if="messageList.length === 0" class="collect-empty">
    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
    <div>暂无内容～</div>
  </div>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/flexible.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/vue.min.js"></script>
<script src="../../script/iconfont.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/restful.js"></script>
<script src="../../script/businessCommon.js"></script>
<script>
  apiready = function () {
    vm = new Vue({
      el: '.app',
      data: {
        messageList: [],
        queryParam: {
          pageNum: 1,
          pageSize: 10
        },
        hasNext: false
      },
      created() {
        this.getMessageList();
      },
      filters: {
        handleTimeYMDHmSZH
      },
      mounted() {
      },
      methods: {
        getMessageList() {
          common("getMessageList")(this.queryParam, function (ret) {
            if (vm.queryParam.pageNum === 1) {
              vm.messageList = ret.data.list
            } else {
              vm.messageList = vm.messageList.concat(ret.data.list)
            }
            vm.hasNext = ret.data.hasNext;
          })
        },
        goPage(item) {
          if (!item.read) {
            common('readMessage')({
              id: item.id
            }, function (ret) {
              item.read = true;
              api.sendEvent({name: 'refreshUnReadMessageNum'})
            })
          }
          api.openWin({
            name: 'info_detial_win',
            url: 'info_detail_win.html',
            bounces: false,
            pageParam: {
              message: item
            }
          });
        }
      },
    })
    api.setRefreshHeaderInfo({
      bgColor: '#f7f7f7',
      textDown: '下拉更新有惊喜',
      textUp: '松开可以刷新'
    }, function (ret, err) {
      vm.pageNum = 1;
      vm.getMessageList();
      api.refreshHeaderLoadDone()
    });
    api.addEventListener({
      name: 'scrolltobottom',
      extra: {
        threshold: -10
      }
    }, function (ret, err) {
      if (vm.hasNext) {
        vm.queryParam.pageNum++
        vm.getMessageList();
      }
    });
  }
</script>
</body>

</html>
